<template>
  <nav role="navigation" aria-label="Pagination Navigation">
    <ul class="v-pagination theme--light">
      <li>
        <nuxt-link
          style="cursor: pointer; text-decoration: none"
          :style="value <= 1 ? 'pointer-events:none' : ''"
          :disabled="value <= 1"
          :to="{ path: path+((value -1)>0?String (value -1):'')}"
        >
          <button
            :disabled="value <= 1"
            type="button"
            aria-label="Previous page"
            class="v-pagination__navigation"
          >
            <i
              aria-hidden="true"
              class="v-icon notranslate mdi mdi-chevron-left theme--light"
            ></i>
          </button>
        </nuxt-link>
      </li>

      <li v-for="pager in length" :key="pager">
        <nuxt-link
          style="cursor: pointer; text-decoration: none"
          :to="{ path: path+pager}"
        >
          <button
            type="button"
            aria-label="Previous page"
            class="v-pagination__navigation"
            :class="pager == value ? 'v-pagination__item--active '+color : ''"
          >
            {{ pager }}
          </button>
        </nuxt-link>
      </li>
      <li>
        <nuxt-link
          style="cursor: pointer; text-decoration: none"
          :style="value===length? 'pointer-events:none' : ''"
           :disabled="value===length"
          :to="{ path: path+((value +1)<=length?String (value +1):'' )}"
        >
          <button
           :disabled="value===length"
            type="button"
            aria-label="Previous page"
            class="v-pagination__navigation"
          >
            <i
              aria-hidden="true"
              class="v-icon notranslate mdi mdi-chevron-right theme--light"
            ></i>
          </button>
        </nuxt-link>
      </li>
    </ul>
  </nav>
</template>

<script>
export default {
  name: "Mpagination",
  props: {
    totalVisible: {
      type: Number,
      default: 10,
    },
    length: {
      type: Number,
    },
    value: {
      type: Number,
    },
    color:{
      type:String
    },
    path:{
      type:String,
      default:'/'
    }
  },
  created() {
    console.log(this.length )
  },
  computed: {
  },
  methods: {
    getArr(firstNum, lastNum) {
      let arr = [];
      for (let i = firstNum; i <= lastNum; i++) {
        arr.push(i);
      }
      return arr;
    },
  },
};
</script>
<style scoped>
</style>